import React from 'react';
import {inject, observer} from "mobx-react";
import { withRouter,Route } from 'react-router-dom';
import { List,InputItem,Radio,Icon,Button,Bubble,Tools } from 'weaver-mobile';
import { RouteLayout } from 'weaver-mobile-page';
import CustomHrmResource from "./CustomHrmResource";
import '../../style/shareTool.less'
const RadioItem = Radio.RadioItem;

const getLabel = Tools.getLabel;
@withRouter
@inject('blogCommentStore')
@observer
export default class DiscussShareTool extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            shareType: 1,
            shareValue:[],
            shareUserList:[]
        };
    }



    componentDidMount() {
        const {shareType,shareValue,shareUserList} = this.props;
        this.setState({shareType:shareType,shareValue:shareValue,shareUserList:shareUserList})
        this.setTitle();
    }



    setTitle = () => {
        let title = getLabel(6104,'公开范围')
        if (window.em && (typeof window.em.checkJsApi === 'function') && window.em.checkJsApi('changeTitle')) {
            window.em.changeTitle({ title });
        }
        window.document.title = title;
    }

    onChange2 = (value) => {

        if(value==1||value==2){
            this.setState({
                shareType: value,
                shareValue:[]
            });
        }else{
            this.setState({
                shareType: value,
            });
        }


    }

    componentWillUnmount() {

    }
    onOk = () => {
        const { shareType,shareValue,shareUserList} = this.state;

        if((shareType==3||shareType==4)&&shareValue.length==0){
            Bubble.error(getLabel(385003,'请选择人员!'));
            return;
        }
        this.props.onCheckOk(shareType,shareValue,shareUserList);

        if(window.location.href.indexOf('/myBlog/writeBlog')>0){
            this.props.history.goBack('/myBlog/writeBlog');
        }else{
            this.props.history.goBack('/myBlog/blog/writeMyBlog');
        }

    }





    onCheckHrm = (p1,p2) => {

        
        if(p1.length>0){
            this.setState({shareValue:p1,shareUserList:p2});
        }else {
            this.setState({shareValue:p1,shareUserList:p2,shareType:1});
        }


    }

    openHHrm = () => {
        const {attentionUserList} = this.props.blogCommentStore;
        const {shareUserList,shareValue} = this.state;
        RouteLayout.open(<CustomHrmResource  shareValue={shareValue} shareUserList={shareUserList} attentionUserList={attentionUserList} onCheckHrm={this.onCheckHrm} discussid={this.props.discussid}/>);
    }

    render(){

        const data2 = [
            { value: 1, label: getLabel(2161,'公开') , extra: getLabel(525178,'所有共享人可见')  },
            { value: 2, label: getLabel(83281,'私密') , extra: getLabel(525179,'仅自己和固定共享人可见')  },
            { value: 3, label: getLabel(521692,'谁可以看') , extra: getLabel(525180,'指定共享人可见')  },
            { value: 4, label: getLabel(525176,'不给谁看') , extra: getLabel(525744,'指定共享不人可见')  },
        ];

        const {cusHrmLayout} = this.props.blogCommentStore;
        const { shareType,shareValue,shareUserList } = this.state;
        let showUserName = '';
        if(shareValue&&shareValue.length){
            showUserName = '('+ shareValue.length+')人 ';
        }else{
            showUserName  = '('+ 0+')人 ';
        }




        Object.keys(shareUserList).map(key => {

            if(shareUserList[key].checked=='1'){
                showUserName = showUserName+","+shareUserList[key].name
            }
        })




        return ( <div >
            <div className="share-tool">
            <List>
                {data2.map(i =>
                    (
                        <RadioItem key={i.value} checked={shareType == i.value}
                                   onChange={() => this.onChange2(i.value)}>
                            {i.label}<List.Item.Brief>{i.extra}</List.Item.Brief>

                        </RadioItem>
                    )
                )}

            </List>
            </div>

            {shareType==3||shareType==4? <div  className="sharevalue-tool">
                <div className="am-list-item am-radio-item am-list-item-middle" onClick={this.openHHrm}>
                    <div className="am-list-line">
                        <Icon  className="shareICon" type='team' size='xs' color='black' />
                        <div className="am-list-content">{getLabel(33210,'选择人员') }
                            <div className="am-list-brief">{showUserName}</div>
                        </div>
                    </div>

                </div>
            </div>:""}

            <div style={{"position":'absolute','bottom':'0px',"width":"100%"}}><Button type={'primary'} onClick={this.onOk}>
                {getLabel(826, "确定")}
            </Button></div>

        </div>)

    }

}